<template>
  <div class='container'>
    <el-dialog :visible='isShow' title="预览文章" :before-close="handleClose">
      <h2>{{article.title}}</h2>
      <div class="box">
        <span>{{article.createTime | parseTime}}</span>
        <span>{{article.creatorID | roleFilter(datas.role)}}</span>
        <span class="el-icon-view"></span>
        <span>{{article.visits}}</span>
      </div>
      <div class="articleBody" v-html="article.articleBody">

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles.js'
import datas from '@/api/base/baseApi'
export default {
  name: 'ArticlesPreview',
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    id: {
      type: Number,
      required: true
    }

  },
  data () {
    return {
      article: {},
      datas
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    handleClose () {
      this.$emit('update:isShow', false)
    },
    async getDetail () {
      console.log(this.id)
      const { data } = await detail({ id: this.id })
      this.article = data
    }
  }
}
</script>

<style scoped lang='scss'>
.box{
  padding-left: 10px;
  span{
    margin-right: 10px;
  }
}
.articleBody{
  padding: 15px 10px;
  background: #f5f5f5;
  border-top: 1px dashed #ccc;
}
</style>
